<template>
    <div class="screen">
        <iframe
                :id="`mask_id${url}`"
                :src="url"
                height="100%"
                width="100%"
                frameborder="0"
                scrolling="auto"
                allowfullscreen="true"
                webkitallowfullscreen="true"
                mozallowfullscreen="true"
                oallowfullscreen="true"
                msallowfullscreen="true"
                name="mapFrame"
                sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
        ></iframe>
    </div>
</template>

<script>
    export default {
        name: 'screen',
        // props: {
        //     url: {
        //         type: String,
        //         default: 'http://192.168.50.63:8082/#/index'
        //     }
        // },
        data () {
            return {
                url: ''
            }
        },
        created () {
            this.url = this.$route.query.url
            // this.url = 'https://element.eleme.cn/#/zh-CN/component/loading'
        },
        watch: {
            $route: {
                handler (val) {
                    this.url = val.query.url
                    if (val.query.type) {
                        val.meta.title = val.query.type
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .screen {
        height: calc(100vh - 78px);
        overflow-y: auto;
    }
</style>
